<template>
  <div class="slide-enter-active">
    <nut-navbar @on-click-back="back" @on-click-title="title" title="修改昵称"></nut-navbar>
    <nut-input v-model="username" @change="change" type="text" max-length="20" label="用户名"
               placeholder="请输入用户名"/>
    <nut-textarea readonly model-value="以英文字母或汉字开头，限4-20个字符，一个汉字为2个字符"/>

    <nut-row class="define-content">
      <nut-col :span="24">
        <div class="flex-content" style="padding:10px">
          <nut-button class="define-button" type="warning" color="#e54847" @click="handleToDefine">确定</nut-button>
        </div>
      </nut-col>
    </nut-row>
  </div>
</template>

<script>
import {reactive, getCurrentInstance, toRefs} from 'vue';
// import {Toast} from '@nutui/nutui';

export default {
  name: "updateUserName",
  data() {
    return {
      username: this.$store.state.user.name,
    }
  },
  setup() {
    const state = reactive({});
    let {proxy} = getCurrentInstance();
    const change = (value, event) => {
      console.log('change: ', value, event);
    };
    return {
      state,
      change,
      proxy,
      ...toRefs(state)
    };
  },
  beforeRouteEnter(to, from, next) {//导航守卫
    const username = window.localStorage.getItem('name');

    if (username === null) {
      next('/mine/login');
    } else {
      next();
    }
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    handleToDefine() {
      console.log('defined')
    }
  },
}
</script>

<style scoped>
.nut-navbar {
  padding: 0;
}

.nut-textarea >>> .nut-textarea__textarea {
  min-height: 0;
}

.define-content {
  position: absolute;
  left: 0;
}

.define-content .define-button {
  width: 100%;
}
</style>